<template>
  <div>
    <QuillEditor
        v-model:content="content"
        content-type="html"
        toolbar="full"
        theme="snow"
        @ready="onEditorReady"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const content = ref('<p>欢迎使用富文本编辑器</p>')

// 图片上传逻辑
const onEditorReady = (quill) => {
  // 自定义图片上传逻辑
  const toolbar = quill.getModule('toolbar')
  toolbar.addHandler('image', () => {
    selectLocalImage(quill)
  })
}

function selectLocalImage(quill) {
  const input = document.createElement('input')
  input.setAttribute('type', 'file')
  input.setAttribute('accept', 'image/*')
  input.click()

  input.onchange = async () => {
    const file = input.files[0]
    if (file) {
      // 上传到服务器
      const formData = new FormData()
      formData.append('file', file)

      try {
        const res = await uploadImage(formData) // 你要自定义的上传逻辑
        const imageUrl = res.data.url // 假设返回的是 { url: 'http://yourdomain.com/img.jpg' }

        const range = quill.getSelection()
        quill.insertEmbed(range.index, 'image', imageUrl)
      } catch (e) {
        console.error('上传失败', e)
      }
    }
  }
}

// 模拟上传函数（你应该替换成真实请求）
async function uploadImage(formData) {
  // 这里是你实际的上传逻辑，比如：
  // return axios.post('/api/upload', formData)

  // 模拟接口返回
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: { url: 'https://via.placeholder.com/350x150' } })
    }, 1000)
  })
}
</script>
